<template>
  <div>
    <fc-designer ref="designer" height="calc(100vh - 84px)" @save="handleSave" :config="config" />
  </div>
</template>

<script setup name="formBuild">
import { nextTick } from "vue";
import { reactive, toRefs, ref, getCurrentInstance } from "vue";
//  import { getPropertiesByid,updateProperties } from "你的请求接口地址";
const { proxy } = getCurrentInstance();
const data = reactive({
  config: {
    showSaveBtn: true,
  },
});
// 可以在此处获取设计器实例或进行其他操作
const designer = ref(null);
const { config } = toRefs(data);
/** 查询设计表单以前数据 */
function getProperties() {
  // getPropertiesByid(id.value).then(res => {
  const aa = {
    "rule": "[{\"type\":\"tableForm\",\"field\":\"Fg1xm6vlrod0abc\",\"title\":\"\",\"info\":\"\",\"props\":{\"columns\":[{\"label\":\"名称\",\"required\":false,\"style\":{\"width\":\"auto\"},\"rule\":[{\"type\":\"input\",\"field\":\"Fxj5m6vlrthgakc\",\"title\":\"输入框\",\"info\":\"\",\"$required\":false,\"_fc_id\":\"id_F8nrm6vlrthgalc\",\"name\":\"ref_Fqifm6vlrthgamc\",\"display\":true,\"hidden\":false,\"_fc_drag_tag\":\"input\"}]},{\"label\":\"是否合格\",\"required\":false,\"style\":{\"width\":\"auto\"},\"rule\":[{\"type\":\"radio\",\"field\":\"Fa8om6vlruz7anc\",\"title\":\"单选框\",\"info\":\"\",\"effect\":{\"fetch\":\"\"},\"$required\":false,\"options\":[{\"label\":\"合格\",\"value\":\"1\"},{\"label\":\"不合格\",\"value\":\"2\"}],\"_fc_id\":\"id_F2bam6vlruz7aoc\",\"name\":\"ref_Fm7jm6vlruz7apc\",\"display\":true,\"hidden\":false,\"_fc_drag_tag\":\"radio\"}]},{\"label\":\"批次\",\"required\":false,\"style\":{\"width\":\"auto\"},\"rule\":[{\"type\":\"checkbox\",\"field\":\"F456m6vlrw4kaqc\",\"title\":\"多选框\",\"info\":\"\",\"effect\":{\"fetch\":\"\"},\"$required\":false,\"options\":[{\"label\":\"1\",\"value\":\"1\"},{\"label\":\"2\",\"value\":\"2\"},{\"label\":\"3\",\"value\":\"3\"}],\"_fc_id\":\"id_Fosfm6vlrw4karc\",\"name\":\"ref_Fq3wm6vlrw4kasc\",\"display\":true,\"hidden\":false,\"_fc_drag_tag\":\"checkbox\"}]}]},\"_fc_id\":\"id_Fav2m6vlrod0acc\",\"name\":\"ref_Fi26m6vlrod0adc\",\"display\":true,\"hidden\":false,\"_fc_drag_tag\":\"tableForm\"}]",
    "options": "{\"form\":{\"inline\":false,\"hideRequiredAsterisk\":false,\"labelPosition\":\"right\",\"size\":\"default\",\"labelWidth\":\"125px\"},\"language\":{},\"resetBtn\":{\"show\":false,\"innerText\":\"重置\"},\"submitBtn\":{\"show\":true,\"innerText\":\"提交\"}}"
};
  nextTick(() => {
    //回显数据
    // eslint-disable-next-line no-undef
    proxy.$refs.designer.setRule(formCreate.parseJson(aa.rule));
    // eslint-disable-next-line no-undef
    proxy.$refs.designer.setOptions(formCreate.parseJson(aa.options));
  });
}
/** 保存表单构建 */
function handleSave(formData) {
  console.log(formData);
  //  updateProperties(buildForm.value).then(res => {
  //      if (res.code == 200) {
  //          proxy.$modal.msgSuccess("保存成功");
  //      } else {
  //          proxy.$modal.msgError(res.msg);
  //      }
  //  })
}
getProperties();
</script>
